<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('注册')"/>
</head>
<body class="pear-container" onload="start()">
<div class="layui-container">
    <form class="layui-form" action="" method="post">
        <div class="layui-form-item" style="margin-left: 70px" id="preStepDiv">
            <button type="button" style="border: none" id="preStep"  >
                < 返回
            </button>
        </div>
        <div class="layui-form-item" style="margin-left: 70px" id="preStep2Div">
            <button type="button" style="border: none" id="preStep2"  >
                < 返回
            </button>
        </div>
        <div id="brDiv">
            <br>
        </div>

        <div class="center layui-form-item logo-title" id="gerenHeader">
            <h4  align="center" style="font-size: large">请填写您的个人信息</h4>
        </div>
        <div class="center layui-form-item logo-title" id="danweiHeader">
            <h4  align="center" style="font-size: large">请填写您的单位信息</h4>
        </div>
        <div class="center layui-form-item logo-title" id="loginHeader">
            <h4  align="center" style="font-size: large">请填写您的登录信息</h4>
        </div>
        <br>

        <div class="layui-form-item" style="margin-left: 40px" id="nicknameDiv">
            <label class="center layui-form-label">姓名</label>
            <div class="center layui-input-inline">
                <input type="text" id="nickname" name="nickname" placeholder="请输入您的真实姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="deptNameDiv">
            <label class="center layui-form-label">单位名称</label>
            <div class="center layui-input-inline">
                <input type="text" id="deptName" name="deptName"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userTypeDive">
            <label class="center layui-form-label">用户类型</label>
            <div class="layui-input-inline">
                <select  id="userType" name="userType">
                    <option selected value="">请选择用户类型</option>
                    <option value="620402439597723648">群众</option>
                    <option value="620402627791949824">单位申报人员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userNameDiv">
            <label class="center layui-form-label">登录账号</label>
            <div class="center layui-input-inline">
                <input type="text" id="userName" name="userName" placeholder="请输入您要注册的账号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 40px" id="userNationDiv">
            <label class="center layui-form-label">民族</label>
            <div class="center layui-input-inline">
                <input type="text" id="userNation" name="userNation"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userOfficeDiv">
            <label class="center layui-form-label">职务</label>
            <div class="center layui-input-inline">
                <input type="text" id="userOffice" name="userOffice"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="passWordDiv">
            <label class="center layui-form-label">登录密码</label>
            <div class="center layui-input-inline">
                <input type="password" id="passWord" name="passWord" placeholder="请输入您要的密码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 40px" id="userSexDiv">
            <label class="center layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input  type="radio" name="userSex" value="0" title="男">
                <input  type="radio" name="userSex" value="1" title="女">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userPhoneDiv">
            <label class="center layui-form-label">电话</label>
            <div class="center layui-input-inline">
                <input type="text" id="userPhone" name="userPhone"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="passWord2Div">
            <label class="center layui-form-label">密码确认</label>
            <div class="center layui-input-inline">
                <input type="password" id="passWord2" name="passWord2" placeholder="再次输入您的密码" lay-verify="passWord2" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item" style="margin-left: 40px" id="userBirthDiv">
            <label class="center layui-form-label">出生年月</label>
            <div class="center layui-input-inline">
                <input type="text" id="userBirth" name="userBirth"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userZipDiv">
            <label class="center layui-form-label">邮编</label>
            <div class="center layui-input-inline">
                <input type="text" id="userZip" name="userZip"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 40px" id="userEducationDiv">
            <label class="center layui-form-label">学历</label>
            <div class="layui-input-inline">
                <select  name="userEducation"  id="userEducation">
                    <option selected value="">请选择学历</option>
                    <option  value="g">博士研究生</option>
                    <option  value="f">硕士研究生</option>
                    <option  value="e">本科</option>
                    <option  value="d">大专</option>
                    <option  value="c">高中</option>
                    <option  value="b">初中</option>
                    <option  value="a">小学</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userAddressDiv">
            <label class="center layui-form-label">通讯地址</label>
            <div class="center layui-input-inline">
                <input type="text" id="userAddress" name="userAddress"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 40px" id="userAcademicDegreeDiv">
            <label class="center layui-form-label" >学位</label>
            <div class="layui-input-inline">
                <select  name="userAcademicDegree">
                    <option selected value="">请选择学位</option>
                    <option value="c">博士</option>
                    <option value="b">硕士</option>
                    <option value="a">学士</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" style="margin-left: 40px" id="userTitleDiv">
            <label class="center layui-form-label">专业职称</label>
            <div class="center layui-input-inline">
                <input type="text" id="userTitle" name="userTitle"  class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 40px" id="userExpertiseDiv">
            <label class="center layui-form-label">研究专长</label>
            <div class="center layui-input-inline">
                <input type="text" id="userExpertise" name="userExpertise"  class="layui-input">
            </div>
        </div>

        <br>


        <div class="layui-form-item" style="margin-left: 70px;position: fixed;bottom: 50px" id="next2Div">
            <button type="button" class="pear-btn pear-btn-success login" id="next2" style="width: 300px"  >
                下一步
            </button>
        </div>
        <div class="layui-form-item" style="margin-left: 70px;position: fixed;bottom: 50px" id="nextDiv">
            <button type="button" class="pear-btn pear-btn-success login" id="next" style="width: 300px"  lay-filter="next">
                下一步
            </button>
        </div>
        <div class="layui-form-item" style="margin-left: 70px;position: fixed;bottom: 50px" id="submmitDiv">
            <button type="submit" class="pear-btn pear-btn-success login" id="submmit" style="width: 300px" lay-submit="" lay-filter="submmit">
                注册
            </button>
        </div>



    </form>





</div>
</body>



<script type="text/javascript">

    function start() {
        // 页面2
        //单位标题头
        $("#danweiHeader").hide();
        //单位名称
        $("#deptNameDiv").hide();
        //职务名称
        $("#userOfficeDiv").hide();
        //电话名称
        $("#userPhoneDiv").hide();
        //邮编名称
        $("#userZipDiv").hide();
        //通讯地址
        $("#userAddressDiv").hide();
        //返回按钮
        $("#preStepDiv").hide();
        //下一步2按钮
        $("#next2Div").hide();

        //页面3
        //返回2按钮
        $("#preStep2Div").hide();
        //注册按钮
        $("#submmitDiv").hide();
        //登录用户名
        $("#userNameDiv").hide();
        //登录密码
        $("#passWordDiv").hide();
        //密码确认
        $("#passWord2Div").hide();
        //登录信息头
        $("#loginHeader").hide();
        //用户类型
        $("#userTypeDive").hide();


    }

</script>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['form','jquery','layer','laydate'], function() {
        let form = layui.form;
        let $ = layui.jquery;
        let layer = layui.layer;
        var laydate = layui.laydate;

        //时间绑定
        laydate.render({
            elem: '#userBirth'
            , trigger: 'click'
            , type: 'date'
        });

        //点击下一步按钮样式变化
        $("#next").click(function() {
            //显示页面2.隐藏页面1和页面3
            //页面2
            //单位信息标题头
            $("#danweiHeader").show();
            //单位名称
            $("#deptNameDiv").show();
            //职务名称
            $("#userOfficeDiv").show();
            //电话名称
            $("#userPhoneDiv").show();
            //邮编名称
            $("#userZipDiv").show();
            //通讯地址
            $("#userAddressDiv").show();
            //返回按钮
            $("#preStepDiv").show();


            //隐藏页面1和页面3和头部空格
            //页面1
            //个人信息标题头
            $("#gerenHeader").hide();
            //姓名
            $("#nicknameDiv").hide();
            //民族
            $("#userNationDiv").hide();
            //专业职称
            $("#userTitleDiv").hide();
            //研究专长
            $("#userExpertiseDiv").hide();
            //学历
            $("#userEducationDiv").hide();
            //学位
            $("#userAcademicDegreeDiv").hide();
            //出生年月
            $("#userBirthDiv").hide();
            //性别
            $("#userSexDiv").hide();
            //下一步按钮
            $("#nextDiv").hide();
            //页面3
            //注册按钮
            $("#submmitDiv").hide();
            //登录用户名
            $("#userNameDiv").hide();
            //登录密码
            $("#passWordDiv").hide();
            //密码确认
            $("#passWord2Div").hide();
            //登录信息头
            $("#loginHeader").hide();
            //返回2按钮
            $("#preStep2Div").hide();
            //用户类型
            $("#userTypeDive").hide();
            //空格
            $("#brDiv").hide();
            //下一步2按钮
            $("#next2Div").show();
        })
        //点击返回按钮样式变化
        $("#preStep").click(function() {
            //隐藏页面2和页面3，显示页面1和空格
            //页面2
            //单位信息标题头
            $("#danweiHeader").hide();
            //单位名称
            $("#deptNameDiv").hide();
            //职务名称
            $("#userOfficeDiv").hide();
            //电话名称
            $("#userPhoneDiv").hide();
            //邮编名称
            $("#userZipDiv").hide();
            //通讯地址
            $("#userAddressDiv").hide();
            //返回按钮
            $("#preStepDiv").hide();
            // //下一步2按钮
            // $("#next2").hide();

            //页面3
            //注册按钮
            $("#submmitDiv").hide();
            //登录用户名
            $("#userNameDiv").hide();
            //登录密码
            $("#passWordDiv").hide();
            //密码确认
            $("#passWord2Div").hide();
            //登录信息头
            $("#loginHeader").hide();
            //返回2按钮
            $("#preStep2Div").hide();
            //用户类型
            $("#userTypeDive").hide();

            //显示
            //页面1
            //个人信息标题头
            $("#gerenHeader").show();
            //姓名
            $("#nicknameDiv").show();
            //民族
            $("#userNationDiv").show();
            //专业职称
            $("#userTitleDiv").show();
            //研究专长
            $("#userExpertiseDiv").show();
            //学历
            $("#userEducationDiv").show();
            //学位
            $("#userAcademicDegreeDiv").show();
            //出生年月
            $("#userBirthDiv").show();
            //性别
            $("#userSexDiv").show();
            //下一步按钮
            $("#nextDiv").show();
            //空格
            $("#brDiv").show();
        })
        //点击返回2按钮样式变化
        $("#preStep2").click(function() {
            //显示页面2，隐藏页面1和页面3和空格
            //页面2
            //单位信息标题头
            $("#danweiHeader").show();
            //单位名称
            $("#deptNameDiv").show();
            //职务名称
            $("#userOfficeDiv").show();
            //电话名称
            $("#userPhoneDiv").show();
            //邮编名称
            $("#userZipDiv").show();
            //通讯地址
            $("#userAddressDiv").show();
            //返回按钮
            $("#preStepDiv").show();
            //下一步2按钮
            $("#next2Div").show();

            //隐藏
            //页面3
            //登录信息头
            $("#loginHeader").hide();
            //登录用户名
            $("#userNameDiv").hide();
            //登录密码
            $("#passWordDiv").hide();
            //密码确认
            $("#passWord2Div").hide();
            //返回2按钮
            $("#preStep2Div").hide();
            //注册按钮
            $("#submmitDiv").hide();
            //用户类型
            $("#userTypeDive").hide();
            //页面1
            //个人信息标题头
            $("#gerenHeader").hide();
            //姓名
            $("#nicknameDiv").hide();
            //民族
            $("#userNationDiv").hide();
            //专业职称
            $("#userTitleDiv").hide();
            //研究专长
            $("#userExpertiseDiv").hide();
            //学历
            $("#userEducationDiv").hide();
            //学位
            $("#userAcademicDegreeDiv").hide();
            //出生年月
            $("#userBirthDiv").hide();
            //性别
            $("#userSexDiv").hide();
            //下一步按钮
            $("#nextDiv").hide();
            //空格
            $("#brDiv").hide();
        })

        //点击下一步2按钮样式变化
        $("#next2").click(function() {
            //显示页面3，隐藏页面1和页面2和空格
            //页面3
            //登录信息头
            $("#loginHeader").show();
            //登录用户名
            $("#userNameDiv").show();
            //登录密码
            $("#passWordDiv").show();
            //密码确认
            $("#passWord2Div").show();
            //注册按钮
            $("#submmitDiv").show();
            //返回2按钮
            $("#preStep2Div").show();
            //用户类型
            $("#userTypeDive").show();

            //隐藏
            //页面1
            //个人信息标题头
            $("#gerenHeader").hide();
            //姓名
            $("#nicknameDiv").hide();
            //民族
            $("#userNationDiv").hide();
            //专业职称
            $("#userTitleDiv").hide();
            //研究专长
            $("#userExpertiseDiv").hide();
            //学历
            $("#userEducationDiv").hide();
            //学位
            $("#userAcademicDegreeDiv").hide();
            //出生年月
            $("#userBirthDiv").hide();
            //性别
            $("#userSexDiv").hide();
            //下一步按钮
            $("#nextDiv").hide();
            //页面2
            //下一步2按钮
            $("#next2Div").hide();
            //单位信息标题头
            $("#danweiHeader").hide();
            //单位名称
            $("#deptNameDiv").hide();
            //职务名称
            $("#userOfficeDiv").hide();
            //电话名称
            $("#userPhoneDiv").hide();
            //邮编名称
            $("#userZipDiv").hide();
            //通讯地址
            $("#userAddressDiv").hide();
            //返回按钮
            $("#preStepDiv").hide();
            //空格
            $("#brDiv").hide();
        })

        //密码确认
        form.verify({
            passWord2: function(value){
                let pwd=$("input[name='passWord']").val();
                let confirm=$("input[name='passWord2']").val();
                if(pwd!=confirm){
                    return '两次密码输入不一致';
                }

            }
        });

        form.on('submit(submmit)', function (data) {
            data.field.userType =  $("#userType option:selected").val();
            data.field.userEducation = $("#userEducation option:selected").val();
            data.field.userAcademicDegree = $("#userAcademicDegree option:selected").val();
            data.field.userSex = $("input[name='userSex']:checked").val();
            $.ajax({
                url: '/add',
                data: data.field,
                dataType: 'json',
                contentType: 'application/x-www-form-urlencoded',
                type: 'post',
                success: function (result) {
                    if (result.code==200) {
                        layer.msg("注册成功", {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
                        });
                    } else {
                        layer.msg(result.msg, {icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });



    })
</script>




</html>